<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys-admin/order/recycle-bin'}">订单回收站</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-descriptions title="用户详细信息" direction="vertical" :column="4" border>
      <el-descriptions-item label="订单号">{{ sn }}</el-descriptions-item>
      <el-descriptions-item label="收件人姓名">{{ name }}</el-descriptions-item>
      <el-descriptions-item label="收件人手机号">{{ tel }}</el-descriptions-item>
      <el-descriptions-item label="快递公司">{{ company }}</el-descriptions-item>
      <el-descriptions-item label="取件信息">{{ message }}</el-descriptions-item>
      <el-descriptions-item label="配送地址">{{ address }}</el-descriptions-item>
      <el-descriptions-item label="订单备注">{{ remark }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">{{ status }}</el-descriptions-item>
      <el-descriptions-item label="配送员姓名">{{ staffName }}</el-descriptions-item>
      <el-descriptions-item label="配送员手机号">{{ staffPhone }}</el-descriptions-item>
      <el-descriptions-item label="是否可评价">{{ isEvaluate }}</el-descriptions-item>
      <el-descriptions-item label="支付方式">{{ type }}</el-descriptions-item>
      <el-descriptions-item label="线上付款金额">{{ onlinePayment }}</el-descriptions-item>
      <el-descriptions-item label="第三方支付流水号">{{ onlinePaymentNum }}</el-descriptions-item>
      <el-descriptions-item label="线下收款金额">{{ offlinePayment }}</el-descriptions-item>
      <el-descriptions-item label="订单创建时间">{{ createTime }}</el-descriptions-item>
      <el-descriptions-item label="订单支付时间">{{ payTime }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "OrderDetailsView",
  data() {
    return {
      sn: '',
      name: '',
      tel: '',
      company: '',
      message: '',
      address: '',
      remark: '',
      status: '',
      staffName: '',
      staffPhone: '',
      isEvaluate: '',
      type: '',
      onlinePayment: '',
      onlinePaymentNum: '',
      offlinePayment: '',
      createTime: '',
      payTime: ''
    }
  },
  methods: {
    showOrderDetails() {
      let orderId = localStorage.getItem('orderId');
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/' + orderId + '/detail';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let orderDetails = response.data.data;
        this.sn = orderDetails.sn
        this.name = orderDetails.name;
        this.tel = orderDetails.tel;
        this.company = orderDetails.company;
        this.message = orderDetails.message;
        this.address = orderDetails.address;
        this.remark = orderDetails.remark;
        let status = orderDetails.status;
        if (status == 1) {
          this.status = "等待接单"
        } else if (status == 2) {
          this.status = '配送中'
        } else if (status == 3) {
          this.status = '配送完成'
        } else {
          this.status = '订单异常'
        }
        this.staffName = orderDetails.staffName;
        this.staffPhone = orderDetails.staffPhone;
        let isEvaluate = orderDetails.isEvaluate;
        if (isEvaluate == 0) {
          this.isEvaluate = '否'
        } else if (isEvaluate == 1) {
          this.isEvaluate = '是'
        }
        let type = orderDetails.type;
        if (type == 1) {
          this.type = '支付宝'
        } else if (type == 2) {
          this.type = '微信'
        } else if (type == 3) {
          this.type = '线下'
        }
        this.onlinePayment = orderDetails.offlinePayment;
        this.onlinePaymentNum = orderDetails.onlinePaymentNum
        this.offlinePayment = orderDetails.offlinePayment;
        this.createTime = orderDetails.createTime;
        this.payTime = orderDetails.payTime;
      })
    }
  },
  mounted() {
    this.showOrderDetails();
  }
}
</script>

<style scoped>

</style>
